<template>
  <div class="header">
    <van-nav-bar>
      <template #left>
        <van-icon @click="toHome" name="wap-home-o" size="25" color="#000" />
      </template>
      <template #title>
        <div>
          {{title}}
        </div>
      </template>
      <template #right>
        <van-icon @click="toSearch" class="search" name="search" size="25" color="#000" />
        <van-icon name="shopping-cart-o" size="25" color="#000" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  props: ['title'],
  methods: {
    toHome () {
      this.$router.push('/')
    },
    toSearch () {
      this.$router.push('/search')
    }
  }
}
</script>

<style lang='less' scoped>
.header{
  width: 7.5rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  .search{
    margin-right: 15px;
  }
}
</style>
